import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { GetPointsMallList } from '../../api/coin'
import { GetUserInfo } from '../../api/mine'
import NavBar from '../../components/Navbar'
import './index.less'

export default function CoinProducts() {
  const navigate = useNavigate()
  const [pointList, setPointList] = useState([])
  const [points, setPoints] = useState(0)

  const toDetail = (item) => {
    window.localStorage.setItem('POINT_ITEM', JSON.stringify(item))
    navigate('/coin_detail?id=' + item.id)
  }

  const getList = () => {
    GetUserInfo().then((res) => {
      console.log(res)
      setPoints(res.data?.points || 0)
    })
    GetPointsMallList().then((res) => {
      setPointList(res?.data || [])
    })
  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <div className="coin_products">
      <NavBar title="积分商城" />
      <div className="mine_info">
        <div className="info_content">
          <div className="coin in">
            <div className="num">{points}</div>
            <div className="text">我的积分</div>
          </div>
          <div className="coin rule" onClick={() => (window.location.href = 'https://www.aimengtec.com/protocol/integral_rule')}>
            <div className="rule_icon"></div>
            <div className="text">积分规则</div>
          </div>
          <div className="coin log" onClick={() => navigate('/exchange_log')}>
            <div className="log_icon"></div>
            <div className="text">兑换记录</div>
          </div>
        </div>
      </div>
      <div className="coin_pro_list">
        {pointList?.map((item) => (
          <div key={item.id} className="coin_item" onClick={() => toDetail(item)}>
            <div className="item_img">
              <img src={item.img} alt="" />
            </div>
            <div className="item_info">
              <div className="tit">{item?.name}</div>
              <div className="price">{item?.point}积分</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
